<template>
  <div id="main" style="width: 100%; height: 400px; margin-top: 10px"></div>
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import request from "@/utils/request";
export default {
  name: "pieChart",
  mixins: [resize],
  data() {
    return {
      list: [],

      chart: null,
      name: "",
    };
  },
  mounted() {
    // this.initChart();
  },
  methods: {
    initChart() {
      request({
        url: `/api/getway/Xy_hse_yhpctj/findhiddenDangerCategory?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        this.list = res.data.list;
        let data1 = [];
        this.list.forEach((item) => {
          data1.push({
            name: item.hiddenDangerCategory,
            value: item.numberOfHiddenDangers,
          });
        });
        let option = {
          title: {
            text: "全年隐患分类",
            textStyle: {
              fontSize: 16,
              fontStyle: "normal",
              fontWeight: "normal",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c}",
          },
          legend: {
            orient: "vertical", //设置图例的方向
            right: 70,
            top: "center",
            itemGap: 30, //设置图例的间距
          },
          toolbox: {
            //   show: true,
            //   feature: {
            //     mark: { show: true },
            //     dataView: { show: true, readOnly: false },
            //     restore: { show: true },
            //     saveAsImage: { show: true },
            //   },
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [20, 150],
              center: ["35%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 20,
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                normal: {
                  label: {
                    show: true,
                    formatter: "{b} : {d}%",
                  },
                  labelLine: { show: true },
                },
              },
              label: {
                //饼图图形上的文本标签
                normal: {
                  show: true,
                  position: "outside", //标签的位置
                  textStyle: {
                    fontWeight: 300,
                    fontSize: 12, //文字的字体大小
                  },
                  // formatter: "{d}%",
                },
              },
              data: data1,
            },
          ],
        };

        this.chart = echarts.init(document.getElementById("main"));
        this.chart.setOption(option);
        window.onresize = this.chart.resize();
      });
    },
  },
};
</script>